var Desktop = {

    applicationLaunchers: [],

    init: function (_appWidth, _appHeight) {
        var appWidth = _appWidth;
        var appHeight = _appHeight;
        var numberOfOpenedWindows = 1; // Must be one since % will be broken otherwise.
        var windowXOffset = 1;

        this.getDesktopWindowWidth = function () {
            return appWidth;
        }

        this.getDesktopWindowHeight = function () {
            return appHeight;
        }

        this.getApplicationLaunchers = function () {
            return this.applicationLaunchers;
        }

        this.addNewLauncher = function (appToAdd) {
            this.applicationLaunchers.push(appToAdd);
        }

        this.addOpenWindow = function () {
            numberOfOpenedWindows++;
        }

        this.resetOpenedWindows = function () {
            numberOfOpenedWindows = 1;
        }

        this.getNumberOfOpenedWindows = function () {
            return numberOfOpenedWindows;
        }

        this.increaseWindowXOffset = function () {
            windowXOffset++;
        }

        this.getWindowXOffset = function () {
            return windowXOffset;
        }

        this.resetWindowXOffset = function () {
            windowXOffset = 1;
        }

        Desktop.renderDesktop(appWidth, appHeight);

        /*
        If you want to add another application just
        edit the code in Desktop.createApplicationLaunchers();
        There's no need to change any code in renderLauncherIcons();
        to make it work.
        */
        this.createApplicationLaunchers();

        this.renderLauncherIcons();
    },

    renderDesktop: function (width, height) {
        // Create the container for the application.
        $('<div id="desktopContainer"></div>').appendTo('body');

        // Add the background for the application.
        $('<div id="wallPaper"></div>').appendTo('#desktopContainer');

        /* 
        Add three divs to separate the application into three
        parts, the first one being the desktop itself. The second
        one is a div that is used to draw the icons since I need
        an element without transparency. The third and last one is
        just the visuals of the taskbar.
        */
        $('<div id="desktopWindow"></div>').appendTo('#wallPaper');
        $('<div id="taskBarActual"></div>').appendTo('#wallPaper');
        $('<div id="taskBarVisual"></div>').appendTo('#wallPaper');
    },

    createApplicationLaunchers: function () {
        // Image Viewer.
        this.addNewLauncher(new Desktop.ImageViewLauncher('Image Viewer', "resources/icons/LightbrownPhotos.png"));

        // Memory.
        this.addNewLauncher(new Desktop.MemoryLauncher('Memory', 'resources/icons/LightbrownSticker.png'));

        // RSS.
        this.addNewLauncher(new Desktop.RSSLauncher('RSS', 'resources/icons/LightBrownRSS.png'));
    },

    renderLauncherIcons: function () {
        // Get all existing launchers.
        var launcherCollection = this.getApplicationLaunchers();

        // Loop through all the launchers and render the launchers' icon to the screen.
        for (var i = 0; i < launcherCollection.length; i++) {
            launcherCollection[i].renderIcon('#taskBarActual');
        }
    }
}


$(function () {
    Desktop.init(1366, 768);
});